 <template>
  <view class="container qj-bg-color">
    <view class="flex flex-col items-center w-full bg-white">
      <view class="flex justify-between items-center w-96  " v-if="isLogin()">
        <view class="header flex items-center my-2 w-1/2" @tap.stop="uiwu.openWindow('/pages/user/user')">
          <image class="header-image" :src="userInfo.avatar" />
          <view class="flex flex-col ml-1">
            <text class="text-lg font-medium w-32 truncate ... ">{{ userInfo?.nickname }} </text>
            <text class="text-xs">查看我的娃娃 ></text>
          </view>
        </view>
        <view class="flex justify-center items-center notice-bg bg-image mt-2"
          @tap.stop="uiwu.openWindow('/pages/index/notice')">
        </view>
        <view class="flex justify-center items-center coin-bg bg-image"
          @tap.stop="uiwu.openWindow('/pages/recharge/recharge')">
          <text class="text-xs mt-2 text-white font-normal">{{ userInfo.now_money }}</text>
        </view>
      </view>
      <Gap height="16rpx" />
      <view class="flex items-center w-96 bg-gray rounded-lg " @tap="toSearch">
        <icon type="search" :size="20" color="" class="ml-2 my-1" />
        <input class="text-left text-sm ml-2 my-1" placeholder="搜索" placeholder-class="input-placeholder" />
      </view>
      <Gap height="32rpx" />
    </view>
    <Gap height="16rpx" />
    <view v-if="menuList.length > 0" class="scroll-container w-96 " id="scrollContainer" :class="menuTopClass">
      <scroll-view class="scrollview whitespace-nowrap w-full overflow-x-hidden" scroll-x="true">
        <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="selectItem(item)"
          :class="item.id == selectedIndex ? 'menu-hover' : ''">{{ item.cate_name }}</view>
      </scroll-view>
    </view>
    <Gap height="10rpx" />
    <view class="flex justify-center items-center swiper-container w-96">
      <!-- <view class="flex justify-center items-center w-full h-full"> -->
      <swiper class="flex-1" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
        style="height: 174px;">
        <swiper-item class="" v-for="item in banner" :key="item?.id">
          <image :src="item?.image" mode="scaleToFill" class="rounded-xl w-full h-full"
            @click="toBannerPage(item.path)" />
        </swiper-item>
      </swiper>
      <!-- </view> -->
    </view>
    <Gap height="34rpx" />
    <view class="flex justify-center items-center w-96 indexIcon">
      <view class="w-full flex flex-col items-center" v-for="(item, index) in indexIcon" :key="index">
        <image :src="item.image" mode="scaleToFill" @tap.stop="uiwu.openWindow(item.path)" />
        <text class="mt-2 text-sm font-semibold">{{ item.title }}</text>
      </view>
    </view>
    <Gap height="34rpx" />
    <view class="flex justify-center prize-container w-full rounded-t-2xl">
      <view class="flex justify-between flex-wrap w-96 mx-2 mb-2">
        <view v-for="item in prizeList" :key="item?.id"
          class="prize-content flex flex-col items-center rounded-2xl mt-2" @click="toProductDetail(item)">
		  <!-- h-44 -->
			<view class= "w-full item-box rounded-2xl overflow-hidden">
				
				<view class="item-tip"  v-if="item.floors_sill > 0 && item?.is_floors">{{ item.floors_sill }}次保夹</view>
				
				<image :src="item?.image" class="item-image rounded-2xl w-full"></image>
				
				<view class="item-start">
					<view class="flex items-center text-sm text-white font-bold" style="fontSize: 26rpx">
						<image src="@/static/image/home-coin.png" class="coin"></image>X{{item.gold}}
					</view>
					
					<view>
						<image src="@/static/image/go.png" class="home-go"></image>
					</view>
				</view>
				<!-- <image :src="item?.image" mode="scaleToFill" class=" rounded-2xl mt-3" /> -->
			</view>
			<view class="item-name">
				{{ item?.store_name }}
			</view>
          
          <!-- <text>{{ item?.store_name }}</text> -->
		  
        </view>
      </view>
    </view>
    <text class=" text-xs "></text>

  </view>

  <!-- 广告弹框 -->
  <AdvertProp :poplist="advert"></AdvertProp>

  <Footer />

</template>

<script setup lang="ts">
import { debounce, isLogin, throttle, toProductDetail } from "@/api/common";
import { mobileLogin, bannerList, categoryIndex, getAdPopup, messageIsNew, productlist, productrandlist, userInfo, getTaBbar, uiwu } from "@/api/interface/interface";
import type { Advert, ApiResponse, Banner, ProductListResponse, ProductSimpleResponse } from "@/api/type/interface";
import Gap from "@/components/gap.vue";
import Footer from "@/components/footer.vue";
import AdvertProp from "@/components/advert.vue";
import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { computed, reactive, ref, toRefs } from "vue";
import { userStore } from "@/store/userStore";
import { configStore } from "@/store/configStore";
import { footerStore } from '@/store/footerStore';

const menu: any = [];

const menuList = reactive(menu);
const baseurl = import.meta.env.VITE_BASE_URL;
const envName = import.meta.env.VITE_NAME;

const selectedIndex = ref<number>(1);
const pageNum = ref<number>(1)
const { app } = toRefs(configStore());

const indexIcon = reactive([
  { title: "联系客服", image: "/static/image/lianxikefu.png", path: "/pages/index/problem" },
  { title: "大神榜", image: "/static/image/dashenbang.png", path: "/pages/user/ranking" },
  { title: "特惠充值", image: "/static/image/tehuichongzhi.png", path: "/pages/recharge/recharge" },
  { title: "优惠券", image: "/static/image/youhuiquan.png", path: "/pages/user/coupon" },
]);


// 处理点击事件
const selectItem = (item: any) => {
  selectedIndex.value = item.id;
  getProductList();
};

/** banner图 */
const banner = reactive<Partial<Banner[]>>([]);

/** 广告 */
const advert = reactive<Partial<Advert[]>>([]);

/** 奖品列表 */
const prizeList = reactive<Partial<ProductSimpleResponse[]>>([]);

const menuIsTop = ref(false);
const userInfo = computed(() => {
  const { userInfo } = userStore();
  return userInfo;
});
onPageScroll(debounce(() => {
  uni.createSelectorQuery().select("#scrollContainer").boundingClientRect(data => {
    console.log(data.top, "data.top");
    if (data.top <= 25) {
      menuIsTop.value = true;
    } else {
      menuIsTop.value = false;
    }
  }).exec();
}, 10));

const menuTopClass = computed(() => {
  return menuIsTop.value ? "scroll-container-top" : "";
});

const toSearch = () => {
  const url = "/pages/index/search";
  uni.navigateTo({ url });
  return;
}

const { setCurrent } = footerStore()
const toBannerPage = (url) => {
  console.log(url);
  if (app.value.index_device_switch == 1) {
    if (url == '/pages/pointsmall/pointsmall') {
		setCurrent(2)
      // uni.switchTab({
      //   url
      // })
      // return;
    }
    uni.navigateTo({
      url
    })
  }

}

const getProductList = async (isMore: boolean = false) => {
  if (false === isMore) {
    pageNum.value = 1;
    prizeList.length = 0;
  } else {
    pageNum.value++;
  }
  const result: ApiResponse<ProductListResponse> = await productlist({
    page: pageNum.value,
    cate_id: selectedIndex.value
  });
  prizeList.push(...result.data.data);
}

//页面底部的触发距离
onReachBottom(async () => {
  getProductList(true);
});


const initPage = async (flag = "") => {

  if (flag === "refresh") {
    selectedIndex.value = 1;
    pageNum.value = 1;
    banner.length = 0;

    prizeList.length = 0;
    menuIsTop.value = false;
    menuList.length = 0;
  }
  //selectItem(menuList[0]);
  const [message, category, banners, advertPopup] = await Promise.all([
    messageIsNew(),
    categoryIndex(),
    bannerList(),
    getAdPopup(),

  ]);

  if (category && category.data) {
    menuList.push(...category.data);
    selectItem(menuList[0]);
  }

  if (banners && banners.data) {
    banner.push(...banners.data);
  }

  if (advertPopup && advertPopup.data) {
    advert.push(...advertPopup.data);
  }

}

/** 登录 **/



onLoad(async () => {
  initPage();
});

onPullDownRefresh(async () => {
  await initPage("refresh");
  uni.stopPullDownRefresh();
});
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 160rpx;
		box-sizing: border-box;
	}
	
/* 这里可以添加一些自定义的样式   #867DCF #9FA2D0 */
.header {
  .header-image {
    width: 76rpx;
    height: 76rpx;
    border-radius: 50%;
  }

}

.footer {
  height: 110rpx;
}

.bg-gray {
  background-color: #f5f5f5;
}

.notice-bg {
  height: 23px;
  width: 65px;
  background-image: url(../../static/image/notice.png);
}

.coin-bg {
  height: 30px;
  width: 91px;
  background-image: url(../../static/image/coin.png);
}

.scroll-container-top {
  top: 0;
  position: sticky;
  z-index: 1000;
  /* 确保它在其他内容上方 */
  //transition: background-color 0.3s ease; /* 添加平滑过渡效果 */
  @apply bg-white w-full;

}

.scrollview ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}



.menu-item {
  color: rgba(114, 113, 113, 1);
  @apply inline-block text-center px-4 py-1 rounded-3xl text-sm font-semibold my-1;
}

.menu-hover {
  background: linear-gradient(180deg, rgba(230, 98, 107, 1) 0%, rgba(220, 0, 12, 1) 100%);
  @apply text-white ml-3;
}

.swiper-container {}

.indexIcon {
  image {
    width: 114rpx;
    height: 114rpx;
  }
}

.rand-container {
  image {
    height: 230rpx;
    width: 230rpx;
  }
}

.prize-container {
  background-color: #fff;

  .prize-content {
    width: 344rpx;
  }
  
  .item-box {
	  position: relative;
	  overflow: hidden;
  }
  .item-tip {
	  position: absolute;
	  right: 20rpx;
	  top: 10rpx;
	  z-index: 9;
	  padding: 4rpx 10rpx;
	  height: 22rpx;
	  display: flex;
	  align-items: center;
	  // width: 82rpx;
	  background: linear-gradient(180deg, rgba(230, 98, 107, 1) 0%, rgba(220, 0, 12, 1) 100%);
	  border: 4rpx solid #fff;
	  border-radius: 20rpx;
	  font-size: 24rpx;
	  color: #fff;
  }
  .item-image {
	  display: block;
	  height: 380rpx;
  }
  .item-start {
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 56rpx;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 0 14rpx;
	  box-sizing: border-box;
	  font-size: 30rpx;
	  background: linear-gradient(180deg, rgba(230, 98, 107, 1) 0%, rgba(220, 0, 12, 1) 100%);
	  .coin {
		  display: block;
		   margin-right: 4rpx;
		  width: 40rpx;
		  height: 40rpx;
		  
	  }
	  .home-go {
		  display: block;
		  width: 88rpx;
		  height: 40rpx;
	  }
  }
  .item-name {
	  padding: 0 20rpx;
	  font-size: 28rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	      -webkit-line-clamp: 2;
	      text-overflow: ellipsis;
	      display: -webkit-box;
	      -webkit-box-orient: vertical;
  }

  // image {
  //   height: 310rpx;
  //   width: 310rpx;
  // }

  text {
    width: 310rpx;
    color: #4C4C4C;
    @apply text-sm py-2;
  }
}
</style>
